<template>
    <div id="app">
        <table>
            <tr>
                <th>
                    <!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
                    <input type="checkbox" v-model="checkedAll" @change="changeAllChecked()" />
                </th>
                <th>序号</th>
            </tr>
            <tr>
                <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
                <td><input type="checkbox" value="1" v-model="checkedItem" /></td>
                <td>1</td>
            </tr>
            <tr>
                <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
                <td><input type="checkbox" value="2" v-model="checkedItem" /></td>
                <td>2</td>
            </tr>
            <tr>
                <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
                <td><input type="checkbox" value="3" v-model="checkedItem" /></td>
                <td>3</td>
            </tr>
            <tr>
                <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
                <td><input type="checkbox" value="4" v-model="checkedItem" /></td>
                <td>4</td>
            </tr>
        </table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            checkedAll: false,
            // 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
            checkedItem: [],
            // 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
            checkedAttr: ["1", "2", "3", "4", "5"],
        };
    },
    methods: {
        // 全选复选框状态改变监听事件
        changeAllChecked() {
            // 判断全选复选框是否选中
            if (this.checkedAll) {
                // 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
                this.checkedItem = this.checkedAttr;
            } else {
                // 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
                this.checkedItem = [];
            }
        },
    },
    watch: {
        // 监听复选框项是否全部选中
        checkedItem() {
            // 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
            if (this.checkedItem.length == this.checkedAttr.length) {
                // 如果所有复选框项全部被选中,则全选复选框也被勾选
                this.checkedAll = true;
            } else {
                // 否则复选框不勾选
                this.checkedAll = false;
            }
        },
    },
};
</script>


